<template>
  <div>
    <contentHeader title="文件列表"></contentHeader>
    <div class="">
      <ul class="file_ul file_li file_talbe_tile">
        <li>文件名</li>
        <li>文件操作</li>
        <li>更新时间</li>
        <li>文件大小</li>
      </ul>

      <ul
        @scroll="handleScrollScroll"
        class="file_ul file_height"
        ref="file_height"
      >
        <li class="file_li" v-for="(item, index) in list" :key="index">
          <div class="file_title">
            <el-image
              style="width: 32px; height: 32px"
              :src="require('../assets/image/file.png')"
            ></el-image>
            <span ref="title">{{ item.title }}</span>
            <span ref="input" class="input"
              ><input
                ref="input_value"
                @blur="input(index, item)"
                type="text"
                :value="item.title"
            /></span>
          </div>
          <div class="operation_box">
            <div class="operation">
              <i @click="edit(index)" class="el-icon-edit"></i>
              <i class="el-icon-download"></i>
              <i class="el-icon-delete"></i>
            </div>
          </div>
          <div>
            <span>{{ item.time }}</span>
          </div>
          <div>
            <span>{{ item.size }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import contentHeader from "../components/contenHeader.vue";

export default {
  data() {
    return {
      input_value: "",
      list: [
        {
          id: 1,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 2,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 3,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 4,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 5,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 6,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 7,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 8,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 9,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 10,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 11,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 12,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 13,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 14,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 15,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 16,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 17,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 18,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 19,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
        {
          id: 20,
          title: "上海坠河公交车后的追车人找到了",
          time: "2020-09-01 10:24",
          size: "182M",
        },
      ],
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScrollScroll);
  },
  methods: {
    handleScrollScroll() {
      // 滚动条触底执行
      const boxHeight = this.$refs.file_height;
      if (
        boxHeight.scrollTop + boxHeight.clientHeight ==
        boxHeight.scrollHeight
      ) {
        console.log("我触底了");
      }
    },
    edit(e) {
      // return false;
      this.$refs.title[e].style = "display: none;";
      this.$refs.input[e].style = "display: block;";
      this.$nextTick(() => {
        this.$refs.input_value[e].focus();
      });
    },
    input(e, item) {
      // 执行修改操作
      if (item.title != this.$refs.input_value[e].value) {
        console.log("执行修改操作");
      }

      this.$refs.title[e].style = "display: block;";
      this.$refs.input[e].style = "display: none;";
    },
  },
  components: {
    contentHeader,
  },
};
</script>

<style lang="less" >
.input {
  display: none;
}
.file_talbe_tile {
  background-color: #edf1f4 !important;
  font-weight: 600;
  li {
    background-color: #edf1f4 !important;
  }
}
.file_height {
  // background: #2ab1e8;
  height: 770px;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    width: 5px;
    border-radius: 20px;
    background-color: #e4e7ed;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #2ab1e8;
    border-radius: 10px;
  }
}
.file_ul {
  padding: 0;
  margin: 0;
  font-size: 12px;
}
.file_li {
  height: 50px;
  // border: 1px solid;
  list-style-type: none;
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  align-items: center;
  &:nth-child(odd) {
    background-color: #f8fafa;
  }
  &:nth-child(even) {
    background-color: #fff;
  }
  .file_title {
    align-items: center;
    display: flex;
    color: #333;

    span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      letter-spacing: 2px;
      width: 200px;
      padding-left: 10px;
      color: #333;
    }
  }
  .operation_box {
    align-items: center;
    // 操作
    .operation {
      text-align: left;
      i {
        padding: 0 5px;
        font-size: 14px;
        color: #2ab1e8;
      }
    }
  }
}
</style>